<template>
  <div>
    <!-- 自定义指令 指令都是以v-开头的属性 -->
    <input type="title" v-model="username" v-len="{ fn: tipFn }" />
    <span style="font-size: 14px; color: #666">{{ tip }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用户名要是超过4位则，有提示
      username: "",
      tip: "请输入用户名",
    };
  },
  methods: {
    // methods中，能操作this对象
    tipFn(msg) {
      this.tip = msg;
    },
  },
  // 局部指令
  directives: {
    // 自定义指令 指令中不能使用this对象，得不到vue组件实例
    /* len: {
      // 第1次加载时才执行，后期更新数据，它不执行
      bind(el, binds) {
        // console.log(el.value);
        if (el.value.length > 4) {
          el.style.color = 'red'
          el.style.border = "1px solid red";
        }
      },
      // 数据更新时，执行
      update(el, binds) {
        if (el.value.length > 4) {
          el.style.color = 'red'
          el.style.border = "1px solid red";
        }else{
          el.style.color = '#000'
          el.style.border = "1px solid #000";
        }
      },
    }, */
    // 简写 bind/update
    len(el, binds) {
      // 打印出来为undefined
      // console.log(this)
      if (el.value.length > 4) {
        el.style.color = "red";
        el.style.border = "1px solid red";
        binds.value.fn('您输入的用户过长')
      } else {
        el.style.color = "#000";
        el.style.border = "1px solid #000";
        binds.value.fn('请输入用户名')
      }
    },
  },
};
</script>

<style lang="scss">
</style>
